<!--
 * @Author: wangming
 * @Date: 2021-04-01 14:02:25
 * @LastEditors: wangming
 * @LastEditTime: 2021-04-27 13:45:40
 * @Description: file content
-->
<template>
  <div>
    <el-form-item label="时间类型">
      <el-select
        v-model="value.__config.timeType"
        placeholder="请选择"
        style="width: 100%"
      >
        <el-option label="时:分" :value="1"> </el-option>
        <el-option label="时:分:秒" :value="2"> </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="时间范围" v-if="value.__config.timeType === 1">
      <el-select
        v-model="value.__config.timefilter"
        placeholder="请选择"
        style="width: 100%"
      >
        <el-option label="不限制" :value="1"> </el-option>
        <el-option label="5分钟为单位" :value="5"> </el-option>
        <el-option label="15分钟为单位" :value="15"> </el-option>
        <el-option label="30分钟为单位" :value="30"> </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="最小值">
      <date-picker
        style="width: 100%"
        v-if="value.__config.timeType === 1"
        type="time"
        placeholder="请选择时间最小值"
        prefix-class="xmx"
        popupClass="reset-date-picker-zindex"
        v-model="value.__config.min"
        valueType="format"
        format="HH:mm"
      >
        <template slot="icon-calendar">
          <i class="el-icon-time"></i>
        </template>
      </date-picker>
      <el-time-picker
        v-if="value.__config.timeType === 2"
        style="width: 100%"
        v-model="value.__config.min"
        format="HH:mm:ss"
        value-format="HH:mm:ss"
        placeholder="请选择时间最小值"
      >
      </el-time-picker>
    </el-form-item>
    <el-form-item label="最大值">
      <date-picker
        style="width: 100%"
        v-if="value.__config.timeType === 1"
        type="time"
        placeholder="请选择时间最大值"
        prefix-class="xmx"
        popupClass="reset-date-picker-zindex"
        v-model="value.__config.max"
        valueType="format"
        format="HH:mm"
      >
        <template slot="icon-calendar">
          <i class="el-icon-time"></i>
        </template>
      </date-picker>
      <el-time-picker
        v-if="value.__config.timeType === 2"
        style="width: 100%"
        v-model="value.__config.max"
        format="HH:mm:ss"
        value-format="HH:mm:ss"
        placeholder="请选择时间最大值"
      >
      </el-time-picker>
    </el-form-item>
  </div>
</template>

<script>
import basicmixins from "./basicmixins";
export default {
  mixins: [basicmixins],
  data() {
    return {};
  },
  methods: {},
  watch: {
    "value.__config.timeType": {
      handler(val) {
        this.value.__config.min = null;
        this.value.__config.max = null;
      },
    },
  },
};
</script>
